<script setup>

import {onMounted, ref} from "vue";

const props = defineProps({
    data:{
        type: Object,
        required:true
    }
})

const mode = ref('horizontal');
onMounted(() => {
    //获取当前屏幕宽度
    const screenWidth = window.innerWidth;
    if (screenWidth < 768) {
        mode.value = 'vertical';
    }
})
</script>

<template>
    <div class="flex justify-center w-full">
        <div class="mr-2">
            {{data.orders}}.
        </div>
        <div class="w-full">
            <div v-html="data.content"></div>
            <!--        答题区域-->
            <div class="mt-3">
                <a-checkbox-group :direction="mode" v-model="data.value" :options="data.options">
                    <template #label="{ data }">
                        <p v-html="data.content"></p>
                    </template>
                </a-checkbox-group>
            </div>
        </div>


    </div>
</template>

<style scoped>

</style>
